<template lang='pug'>
.his
  <van-cell title="选择出行日期" @click="show = true" />
  <van-calendar v-model="show" @confirm="onConfirm" />
  h3 {{ date ? date : '-- 年 -- 月 -- 日' }}
  .top-rout
    
</template>
<script>
import Vue from "vue";
import { Calendar, Cell } from "vant";
Vue.use(Calendar);
Vue.use(Cell);
export default {
  data() {
    return {
      date: "",
      show: false,
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()} 年 ${
        date.getMonth() + 1
      } 月 ${date.getDate()} 日`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    }
  },
  mounted(){
    console.log(window)
  }
};
</script>
 
<style scoped lang="sass">
.his
  width: 100%
  height: 100vh
  padding: .2rem
  box-sizing: border-box
  background: rgba(229, 83, 83, 1)
  position: relative
  h3
    font-size: .3rem
    color: #fff
    margin-top: .3rem
    font-weight: bold
    .top-rout
      width: 3.75rem
      height: 5rem
      background: #fff
      position: absolute
      top: 0
      left: 0
      margin-top: 50%
      box-shadow: 0px 2px 4px rgba(0, 0, 0, .5)
      border-radius: .1rem .1rem 0 0
</style>